import React, { ReactElement, useEffect } from 'react';
import { Animated, Easing, View } from 'react-native';

import { phonePx } from '../../../../../../util/adapt';
import styles from './style';
import MsgBox from '../../../Graph/MsgBox';

interface SendMsgProps {
  lineColor?: string;
  fillColor?: string;
}

const lines: {
  initAnimate: Animated.Value;
  animate: Animated.AnimatedInterpolation;
}[] = [];

for (let i = 0; i < 18; i += 1) {
  const initAnimate: Animated.Value = new Animated.Value(0);
  const animate = initAnimate.interpolate({
    inputRange: [0, 0.5, 1], // 输入值
    outputRange: [phonePx(4), phonePx(12), phonePx(4)] // 输出值
  });

  lines.push({ initAnimate, animate });
}

export default ({
  lineColor = '#B5A777',
  fillColor
}: SendMsgProps): ReactElement => {
  useEffect((): (() => void) => {
    const animations = lines.map(
      (item): Animated.CompositeAnimation =>
        Animated.loop(
          Animated.timing(item.initAnimate, {
            toValue: 1, // 最终值 为1，这里表示最大旋转 360度
            duration: 2000,
            easing: Easing.bounce,
            useNativeDriver: false
          })
        )
    );
    const timer = Animated.stagger(200, animations);
    timer.start();

    return (): void => {
      timer.stop();
    };
  }, []);
  return (
    <MsgBox style={styles.ripple} fillColor={fillColor}>
      <View style={styles.lineContent}>
        {lines.map(
          (item): ReactElement => (
            <Animated.View
              style={[
                styles.line,
                { backgroundColor: lineColor },
                { height: item.animate }
              ]}
            />
          )
        )}
      </View>
    </MsgBox>
  );
};
